<template>
  <div style="padding: 20px">
    <div class="headerBoxList">
    <svg t="1714368222967" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5406" width="20" height="20"><path d="M514.34 0l22.821 19.017c93.842 90.917 221.038 133.632 401.554 151.04l34.085 3.73V579c0 169.252-149.943 316.708-445.66 438.418L511.123 1024l-15.652-7.168C196.535 880.055 51.2 736.842 51.2 578.999V169.838h38.4c141.02 0.22 285.257-59.904 400.091-153.015L514.341 0zM354.89 256C325.85 256 256 308.882 256 357.23 256 498.615 510.537 768 669.11 768c43.594 0 98.89-46.885 98.89-101.23 0-18.578-113.445-101.156-139.63-101.156-26.916 0-46.519 23.771-69.851 23.771-23.26 0-128-104.96-128-130.926 0-26.112 23.332-38.765 23.332-65.536C453.851 373.613 384 256 354.89 256z" fill="#2c2c2c" p-id="5407"></path></svg>
      <span style="margin-left: 10px"
        >拦截通话
      </span>
       <el-button style="margin-left: auto;" type="primary" size="mini" @click="printJson">
    打印 JSON
  </el-button>
    </div>
    <div class="content">
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="content"
        label="内容"
        >
        <template slot-scope="scope">
            <div>名称：{{scope.row.name}}</div>
            <div>电话 ：{{scope.row.phone}}</div>
            <div>被标记次数：{{scope.row.mark_count}}</div>
            <div>时间 ：{{formateDate(scope.row.date)}}</div>
        </template>
      </el-table-column>
    </el-table>
      <div class="block">
    <el-pagination
      :small='true'
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="offset"
      :page-sizes="[20, 50, 100, 200]"
      :page-size="limit"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
    </div>
  </div>
</template>
  
  <script>
  import { getHuaWeiInfoApi } from "@/api/phoneInfo/index"
  import { parseTime } from '@/utils/index'
export default {
  props:['sendData'],
  name: "callslist1",
  data() {
    return {
      list: [],
      offset:1,
      limit:1000,
      total: 0,
    };
  },
  mounted() {
    this.init();
  },

  watch: {
    "$store.state.account.huawei1": function () {
      this.tableData = [];
    this.init()
    },
  },
  methods: {
    printJson() {
      if (!this.list || this.list.length === 0) {
        this.$message.warning("暂无数据可打印");
        return;
      }

      const data = this.list.map(item => ({
        名称: item.name,
        电话: item.phone,
        被标记次数: item.mark_count,
        时间: this.formateDate(item.date)
      }));

      printJS({
        printable: data,
        type: "json",
        properties: ["名称", "电话", "被标记次数", "时间"],  // ✅ 控制字段顺序
        header: "拦截通话记录",
        style: "table, th, td {border:1px solid #ccc;padding:6px;}"
      });
    },
    formateDate(date){
        return parseTime(date)
    },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.limit = val;
        this.init()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.offset = val;
        this.init()
      },
    init() {
        let data = {
            proof_num : this.sendData.proof_num,
            harassmentType:'callslist',
            offset:this.offset,
            limit:this.limit
        }
        getHuaWeiInfoApi(data).then(res=>{
            this.list = res.data;
            if(res.data.length ==0)this.total = 0
            this.total = res.data[0].cnt
        }).catch(error=>{

        })
    },
  },
};
</script>
  
  <style scoped>
.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}
.content {
  height: 80vh;
  overflow-y: auto;
  /* padding-left: 50px; */
  margin-top: 20px;
}
@media screen and (min-width: 2360px) {
  .content {
    height: 67vh;
    overflow-y: auto;
  }
}
</style>